<template>
  <div>
    <operation-title
      title="充值商品"
      :icon="TitleIcon"
    />
    <div class="divider" />
    <div class="func">
      <p class="attr">
        设置样式
      </p>
      <div class="adjust-item">
        <span>背景色</span>
        <el-color-picker v-model="pageConfig.bgcolor" />
        <span>{{ pageConfig.bgcolor }}</span>
      </div>
      <!-- <div class="adjust-item">
        <span>外边距</span>
        <el-slider
          v-model="pageConfig.bgMargin"
          :min="0"
          :max="30"
          show-input
          size="small"
        />
        px
      </div> -->
      <div class="adjust-item">
        <span>内边距</span>
        <el-slider
          v-model="pageConfig.bgPadding"
          :min="0"
          :max="30"
          show-input
          size="small"
        />
        px
      </div>
      <div class="adjust-item">
        <span>上边距</span>
        <el-slider
          v-model="pageConfig.marginTop"
          :min="0"
          :max="30"
          show-input
          size="small"
        />
        px
      </div>
      <div class="adjust-item">
        <span>下边距</span>
        <el-slider
          v-model="pageConfig.marginBottom"
          :min="0"
          :max="30"
          show-input
          size="small"
        />
        px
      </div>
      <div class="adjust-item">
        <span>左右边距</span>
        <el-slider
          v-model="pageConfig.margin"
          :min="0"
          :max="30"
          show-input
          size="small"
        />
        px
      </div>
      <div class="adjust-item">
        <span>圆角</span>
        <el-slider
          v-model="pageConfig.bgRadius"
          :min="0"
          :max="30"
          show-input
          size="small"
        />
        px
      </div>
      <div class="adjust-item">
        <span>未选</span>
        <el-color-picker v-model="pageConfig.unselectcolor" />
        <span>{{ pageConfig.unselectcolor }}</span>
      </div>
      <div class="adjust-item">
        <span>选中</span>
        <el-color-picker v-model="pageConfig.selectedcolor" />
        <span>{{ pageConfig.selectedcolor }}</span>
      </div>
      <div class="adjust-item">
        <span>选项条</span>
        <el-radio-group v-model="pageConfig.tabShow">
          <el-radio :label="false">
            关闭
          </el-radio>
          <el-radio :label="true">
            开启
          </el-radio>
        </el-radio-group>
      </div>
      <div class="adjust-item">
        <span>规格排列</span>
        <el-radio-group
          v-model="productColsModel"
          @change="changeProductCols"
        >
          <el-radio :label="1">
            一列
          </el-radio>
          <el-radio :label="2">
            两列
          </el-radio>
          <el-radio :label="3">
            三列
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="divider" />
    <div class="func">
      <p class="attr">
        主选项卡设置
      </p>
      <ul
        v-if="pageConfig?.tabList?.length > 0"
        class="add-item"
      >
        <li
          v-for="(item, index) in pageConfig.tabList"
          :key="index"
          :class="currentIndex == index ? 'active' : ''"
          @click="chooseTab(index)"
        >
          <div v-if="currentIndex != index">
            {{ item.title }}
          </div>
          <div v-else>
            <div class="adjust-item">
              <span style="width: 80px">标题</span>
              <el-input
                v-model.trim="pageConfig.tabList[currentIndex].title"
                class="input-content"
                size="small"
                type="text"
                maxlength="20"
                :show-word-limit="true"
              />
            </div>

            <div class="adjust-item">
              <span style="width: 80px">选择商品</span>
              <div class="goods-list">
                <el-button
                  size="small"
                  link
                  type="primary"
                  @click.stop="showGoodsTransfer"
                >
                  增删商品
                </el-button>

                <div class="img-list">
                  <Gallery
                    :list="goodsList"
                    src-key="thumbnailUrl"
                    alt-key="name"
                    style="margin-top: 10px"
                    disable-close
                  />
                </div>
              </div>
            </div>

            <div class="adjust-item">
              <span style="width: 80px; flex-shrink: 0">商品规格</span>

              <div class="product-list">
                <div class="img-list">
                  <Gallery
                    :list="productList"
                    src-key="thumbnailUrl"
                    alt-key="name"
                    style="margin-top: 10px"
                    disable-close
                  />
                </div>
              </div>
            </div>

            <div class="adjust-item">
              <span style="width: 80px; flex-shrink: 0">备注</span>
              <el-input
                v-model="pageConfig.tabList[currentIndex].memo"
                class="input-content"
                size="small"
                type="text"
                maxlength="30"
                :show-word-limit="true"
                @blur="pageConfig.tabList[currentIndex].memo.trim()"
              />
            </div>
          </div>
          <el-icon
            class="remove"
            @click.stop="removeTab(index)"
          >
            <RemoveFilled />
          </el-icon>
        </li>
        <li
          class="extra-li"
          @click="addTab"
        >
          <p>+添加</p>
        </li>
      </ul>
    </div>
    <div class="divider" />
    <div class="func">
      <p class="attr">
        显示内容
      </p>
      <div class="adjust-item">
        <el-checkbox v-model="pageConfig.priceShow">
          规格现价
        </el-checkbox>
      </div>
      <div class="adjust-item">
        <el-checkbox v-model="pageConfig.originalPriceShow">
          规格原价
        </el-checkbox>
      </div>
    </div>
    <div class="divider" />

    <goods-select-2
      v-model:show="goodsDialogVisible"
      :values="goodsList"
      with-products
      :search-form="goodsSelectSearchForm"
      @confirm="confirmGoods"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: "ChargeGoodsOperation",
};
</script>
<script lang="ts" setup>
import { onMounted, Ref, withDefaults, ref, watch } from "vue";
import { productDetail } from "@/api/actapp";
import { useMallConfig } from "@/views/pointsMall/compositions/useMallConfig";
import GoodsSelect2 from "@/components/goodsCenter/GoodsSelect2.vue";
import TitleIcon from "@/assets/app/icon/tabbar.png";
import { usePageConfig } from "@/views/activity/actApp/components/default/compositions/usePageConfig";
import OperationTitle
  from "@/views/activity/actApp/components/default/operationComponents/operationTitle/OperationTitle.vue";
import { IChargeGoodsDefaultValue, chargeGoodsDefaultValue } 
  from "@/views/activity/actApp/components/v1.8.0.230720/operationDefaultValue/chargeGoodsDefaultValue";


const props = withDefaults(defineProps<{
  pageConfig: IChargeGoodsDefaultValue
}>(), {
  pageConfig: () => {
    return JSON.parse(JSON.stringify(chargeGoodsDefaultValue)) as IChargeGoodsDefaultValue // deep clone
  }
});

const emits = defineEmits<{ 
  (e: "change-style", value: IChargeGoodsDefaultValue): void
  (e: "update:page-config", value: IChargeGoodsDefaultValue): void;
 }>();

const { pageConfig } = usePageConfig<IChargeGoodsDefaultValue>(props, emits)
const { mallConfig } = useMallConfig();

// 标签
const currentIndex:Ref<number> = ref(0);
const addTab = () => {
  pageConfig.value.tabList.push({
    title: "选项",
    enableSubCate: "1",
    goodsList: [],
    memo: "",
  });
};

const removeTab = (idx: number) => {
  chooseTab(0)

  if (pageConfig.value.tabList.length < 2) {
    return;
  } else {
    pageConfig.value.tabList.splice(idx, 1);
  }
};

const chooseTab = (index: number) => {
  // console.log("merchant chooseTab", index)
  currentIndex.value = index;
  pageConfig.value.tabIndex = index;
};

// 添加商品
const goodsDialogVisible: Ref<boolean> = ref(false);
const goodsSelectSearchForm = ref({
  mallId: undefined,
})
const showGoodsTransfer = () => {
  goodsSelectSearchForm.value.mallId = mallConfig.value.id
  goodsDialogVisible.value = true;
};

// 确认商品添加
const confirmGoods = (selected: {id: number}[]) => {
  const currentTab = pageConfig.value.tabList[currentIndex.value];

  if (!selected.length) {
    currentTab.goodsList = []
    return
  }

  currentTab.goodsList = selected.map(item => ({
    id: item.id,
  }));

  getGoodsList();
}


// 规格列数设置
const productColsModel = ref(pageConfig.value?.productCols ?? 2);
const changeProductCols = (value: string | number | boolean) => {
  // console.log("merchant cols change", value)
  pageConfig.value.productCols = Number(value);
}

const goodsList = ref([]);
const productList = ref([]);
const getGoodsList = async () => {
  const tabConfig = pageConfig.value.tabList[currentIndex.value]

  if (!tabConfig) {
    return
  }

  let goodsIds = tabConfig.goodsList.map((item: { id: number }) => item.id)

  if (!goodsIds.length) {
    return;
  }

  const rs = await productDetail({
    mallId: mallConfig.value.id,
    goodsIds: goodsIds,
    withProducts: true,
    currentPage: 1,
    showCount: -1,
  });

  goodsList.value = rs.payload ?? [];
  if (rs.payload?.[0]?.products?.length) {
    productList.value = rs.payload[0].products
  }
}

watch(currentIndex, () => {
  // console.log("标签变更", currentIndex.value);
  goodsList.value = [];
  productList.value = [];
  getGoodsList();
}, {
  immediate: true
})


onMounted(() => {
  pageConfig.value.mallId = '' + mallConfig.value.id;
  currentIndex.value = 0;
  pageConfig.value.tabIndex = 0;
})
</script>

<style lang="scss" scoped>
.title {
  padding: 8px 23px;
  overflow: hidden;
  border-bottom: 5px solid #f6f7f9;
  display: flex;
  position: relative;
  height: 50px;
  box-sizing: border-box;

  img {
    position: absolute;
    left: 0;
    top: -5px;
  }

  h5 {
    font-size: 16px;
    font-weight: 700;
    position: absolute;
    left: 70px;
    top: 0;
    line-height: 50px;
  }
}

.func {
  border-bottom: 5px solid #f6f7f9;
  padding: 20px 16px;
  font-size: 16px;

  .extra-li {
    justify-content: center;
    background: #f4f3f7;
    border-radius: 4px;
    padding: 10px 20px 10px 10px;
    color: #999;
    margin-top: 10px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
  }

  .attr {
    line-height: 1;
    color: #47565d;
    font-weight: bolder;
    margin-bottom: 20px;

    span {
      font-size: 14px;
      font-weight: 400;
      color: red;
    }
  }

  ul.common-ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;

    li {
      flex: 1;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px 0 0 4px;
      border: 2px solid #ededed;
      border-collapse: collapse;

      &.active {
        border: 2px solid #fb6638;
      }

      img {
        max-width: 100% !important;
        max-height: 100% !important;
      }
    }
  }

  h4 {
    position: relative;
    padding: 8px 16px 8px 16px;
    border-radius: 6px;
    color: red;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 10px;
    border: 1px solid #d8e8fc;
    background-color: #e5f0fe;
  }

  div.adjust-item {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;

    span {
      width: 64px;
      text-align: right;
      margin-right: 15px;
      color: #666;
    }

    :deep(.el-slider) {
      width: 240px;
      margin-right: 3px;
      margin-left: 15px;
    }

    :deep(.el-checkbox) {
      width: 100px;
      margin-right: 13px;
    }

    :deep(.el-color-picker) {
      margin-right: 13px;
    }

    :deep(.el-slider__runway.show-input) {
      margin-right: 15px;
    }

    :deep(.el-input-number) {
      width: 100px;
      background: #f4f3f7;
      border: 1px solid #f4f3f7;
    }

    .input-content {
      width: 200px;
    }

    .common-ul {
      width: 200px;
    }
  }

  .extra-div {
    justify-content: center;
    background: #f4f3f7;
    border-radius: 4px;
    padding: 10px 20px 10px 10px;
    color: #999;
    margin-top: 10px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
  }

  .add-item2 {
    width: 100%;
    display: flex;
    list-style: none;
    flex-wrap: wrap;

    .img-list {
      background: transparent;
      padding: 10px;
      margin-bottom: 0;

      img {
        width: 50px;
        height: 50px;
      }
    }
  }

  .add-item {

    li {
      background: #f4f3f7;
      border-radius: 4px;
      padding: 10px 20px 10px 10px;
      color: #999;
      border: 1px solid #f4f3f7;
      margin-top: 10px;
      margin-bottom: 20px;
      position: relative;
      display: flex;

      &.active {
        border: 1px solid red;
      }

      .link-div {
        width: calc(100% - 80px);
        display: flex;
        align-items: center;
        background: #e8effc;
        border: 0;
        padding-left: 16px;
        cursor: pointer;
        position: relative;

        :deep(.el-icon) {
          margin-right: 10px;
        }

        :deep(.el-input) {
          font-size: 12px;
          height: 30px;
          width: calc(100% - 30px);
        }

        .close-btn {
          position: absolute;
          right: 5px;
        }
      }

      .sure-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
      }

      .remove {
        display: none;
        top: 12px;
        cursor: pointer;
        position: absolute;
        right: 5px;
        color: red;
      }

      &:hover {
        .remove {
          display: block;
        }
      }
    }
  }
}

:deep(.el-radio__label) {
  font-size: 16px;
}

.img-placeholder {
  width: 80px;
  height: 80px;
}

.upload-img {
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-right: 10px;
  border: 1px dashed #ededed;
  text-align: center;
  color: #dad9d9;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  float: left;
  position: relative;

  :deep(.el-image) {
    width: 80px;
    height: 80px;
  }

  &:hover {
    .upload-img_cover {
      opacity: 1;
    }
  }

  .upload-img_cover {
    opacity: 0;
    position: absolute;
    transition: all 0.3s ease;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }
}

:deep(.el-upload-list) {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

:deep(.el-upload--picture-card) {
  width: 80px;
  height: 80px;
}

.gray {
  background-color: #f4f3f7;
}

.goods-div-container {
  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      width: calc(33.3% - 10px);
      margin-right: 10px;
      margin-bottom: 10px;
      height: 76px;
      border: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 12px;
      box-sizing: border-box;

      img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }

      h4 {
        max-height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        font-size: 14px;
        color: #333;
      }

      p {
        font-size: 14px;
        line-height: 20px;
        color: #fb6638;
        display: flex;

        span {
          font-size: 12px;
          transform: scale(0.8);
        }
      }

      &.active {
        border: 1px solid #fb6638;
      }
    }
  }
}

.align-start {
  align-items: flex-start !important;
}

.vertical-center {
  display: flex;
  align-items: center;
}

.goods-list,
.product-list {
  display: flex;
  align-items: center;
  flex-direction: column;

  .img-list {
    flex: 1;
  }
}

.add-sub-cate {
  margin-bottom: 5px;
}
</style>
